<template>
    <div class="content">
        <div class="header">
            {{title}}
        </div>
        <ul class="lists">
            <li v-for="item in items" :key="item.id">
                <a href="">
                    <img class="img" :src="item.images.small" alt="cover"/>
                    <div class="info">
                        <span class="tit">{{item.title}}</span>
                        <Rating v-if="item.rating" :rating="item.rating"></Rating>
                    </div>
                </a>
            </li>
        </ul>
        <slot></slot>
    </div>
</template>

<script>
import Rating from '../components/Rating'

export default {
    name: 'SearchResultList',
    props: ['title', 'items'],
    components: {
        Rating
    },
    data(){
        return {
            
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    .header {
        font-size: 1.8rem;
        margin: 0.8rem 0 1rem;
    }
    .lists {
        overflow: hidden;
        
        li {
            border-bottom: 1px solid #ccc;
            padding: 1rem 0;
        }
        a {
            display: table;
            overflow: hidden;
            .img {
                width: 8rem;
                height: auto;
                float: left;
                margin-right: 1rem;
                display: table-cell;
                vertical-align: middle;
            }
            .info {
                display: table-cell;
                vertical-align: middle;
                .tit {
                    font-size: 1.8rem;
                }
            }
        }
    }
}


</style>
